前言

當我們在製作動畫時，除了使用 HTML + CSS 手刻元素之外，想必大家會想要直接上網找圖片來製作對吧？但是當瀏覽器在下載網站圖片時，每下載一次就會發送 HTTP request 一次，有十張照片就要發送 HTTP request 十次，瀏覽器也面的載入速度就會開始慢慢下降。

為了避免造成瀏覽器負擔，我們可以將圖片合成一張圖片，如此一來瀏覽器在讀取時只需要下載一張圖片就好，這樣就能夠大大降低瀏覽器的負擔。

簡介

那麼什麼是 Sprite 呢？

Sprite「精靈圖」，或音譯「雪碧圖」。是一種電腦圖學，通常用於影片遊戲之中，他的原理就是：將二維圖片放入更大的圖像畫面中，一次只顯示該圖像的一部份，這比電腦運算要一次性的存取大量圖片還要更加輕便快速
。其歷史可以追朔到 1970 年代(沒錯，就是那個街機遊戲相當發達的年代)。

CSS Sprite 也是利用相同原理，一次性的抓取圖片，透過移動讓只有一部份的圖示顯示出來。

如何應用 Sprite

在網頁上，有許多種方式可以達到 CSS Sprite 效果。最簡單的例子就是利用 background 來製作 Sprite 圖片，以下面圖片為例，我們來動手實作看看吧～

網頁雪碧圖

• 首先我們先將放置圖片的框架架構好：

<div class="sprite"></div>

.sprite {
	width: 90px;
	height: 90px;

• 將整張大圖透過 background 載入，設置圖片不重複：

.sprite {
background-image: url(https://i.imgur.com/Xxkugga.jpg);
background-repeat: no-repeat;
}

• 調整 background-position 讓圖片出現在正確的位置：

background-position: -117px -36px;

完成

像這樣的做法我們就可以很輕鬆的利用 圖片檔做出 icon 切換的效果。

Sprite Animation

但是，會使用 Sprite 跟網頁動畫到底有什麼關聯呢？
回想一下我們前面的技術介紹，是否有些蛛絲馬跡可循呢？沒錯！我們可以結合 Tramsition 或是 Animation 來製作每一幀的元素位置，或是透過 Canvas 去計算 Sprite 在畫布上的位置。

那麼廢話不多說，我們就立刻來製作一個簡單的 Sprite 動畫吧～

彩虹貓 NyanCat

• 跟剛剛一樣，我們把元素的視窗框架架構好，並將圖片透過 background 載入：

<div class="NyanCat"></div>

.NyanCat {
  width: 290px;
  height: 148px;
  background: url(https://i.imgur.com/UM33Xkx.png);
}

• 設定 Animation 動畫，我們的圖片有五幀，所以是 steps(5)，並且讓他無限循環動畫：

.NyanCat {
  animation: NyanCat .5s steps(5) infinite;
}

• 設定 keyframes，由於我們使用 steps(5) 已經幫我們設定好要五幀動畫反覆切換，所以我們將 keyframes 設定 100% 時的最後一個畫面：

@keyframes NyanCat {
  100% {
    background-position: -1500px 0;
  }
}

完成

喵喵喵喵喵喵喵喵喵 Nyan Cat！！

今天的 Sprite 動畫就介紹到這邊，有沒有覺得相當有趣呢？
雖然現在的瀏覽器對於圖像處理的效能都已經很好了，但是了解了 Sprite 來由跟觀念還是蠻重要的。而如今的 Sprite 也演進到還有 SVG Sprite 可以使用，避免畫質跑掉。

那麼歡迎大家也實作看看 Sprite 動畫，有任何作品或心得都歡迎交流喔～

我們明天見！

參考資料

• [Wiki - Sprite (computer graphics)](https://en.wikipedia.org/wiki/Sprite_(computer_graphics)
• css-tricks - CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• varvy.com - How to use CSS sprites